<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xyulu-航海日记~砥砺前行</title>
<meta name="keywords" content="前端模板">
<meta name="description" content="前端模板">
<link rel="stylesheet" href="/blog/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/blog/dist/semantic/semantic.min.css">
<link rel="stylesheet" href="/blog/css/global.css"/>
<link rel="stylesheet" href="/blog/css/animate.css"/>
<link rel="stylesheet" href="/blog/css/my.css"/>
</head>
<body>

<div class="layui-header header" th:replace="blog/fragment::nav(1)"></div>

<div class="layui-container container">
  <div class="layui-row layui-col-space20">
    <div class=" layui-col-md8">
      <div class="article-main animated fadeInLeft">
        <h2>文章推荐</h2>
        <div class="article-list ui segment" th:each="article:${articles}">
          <span class="ui teal right ribbon label" th:if="${article.type == 0}">原创</span>
          <span class="ui right ribbon label" th:if="${article.type == 1}">转载</span>
          <div id="content">
            <figure>
              <a th:href="@{/article/{id}(id=${article.id})}" target="_blank">
                <img src="/blog/images/01.jpg" th:if="${article.firstImg} != null" th:src="@{${article.firstImg}}">
                <img src="/blog/images/01.jpg" th:unless="${article.firstImg} != null">
              </a>
            </figure>
            <ul>
              <h3><a href="javascript:;" target="_blank" th:href="@{/article/{id}(id=${article.id})}" th:text="${article.title}">住在手机里的朋友</a></h3>
              <p th:text="${article.articleDesc}"></p>
              <p class="autor">
              <span class="lm f_l">
                <a href="javascript:;" th:href="@{'/articleList/1?category='+${article.category}}" th:text="${article.categoryName}">个人博客</a>
              </span>
                <span class="dtime f_l" th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}">2014-02-19</span>
                <span class="viewnum">浏览（<a href="javascript:;" th:text="${article.totalView}" target="_blank" th:href="@{/article/{id}(id=${article.id})}">459</a>）</span>
                <span class="pingl">评论（<a href="javascript:;" th:text="${article.commentNum}">30</a>）</span></p>
            </ul>
          </div>
        </div >
      </div>
      <!--分页-->
      <div id="page" th:replace="blog/fragment::page"></div>
    </div>
    <div class="layui-col-md4" style="margin-top: 30px">
      <!--个人卡片-->
      <div class="ui teal fluid card animated flipInX">
        <!--头像-->
        <div align="center" style="margin-top: 10px">
          <img class="ui circular image" style="width:200px;height:200px" src="/blog/images/01.jpg">
        </div>
        <div class="content" align="center">
          <h1>Xyulu</h1>
<!--          <div class="meta"><span>江苏  南京</span></div>-->
          <div class="description">砥砺前行</div>
        </div>
        <div class="extra content" align="center">
          <a href="https://gitee.com/lu_ming_jun" target="_blank">
            <img style="width:50px;height:50px" src="/blog/images/mayun.png" id="gitee"></a>

          <a><img style="width:60px;height:60px" id="wechat" src="/blog/images/wechat.png"></a>

          <div id="wechatImg" class="ui wechatRead flowing popup transition hidden" style="width: 130px !important">
             <img src="/blog/images/lu.jpg" class="ui rounded image" style="width: 100px" />
          </div>

          <a href="https://blog.csdn.net/qq_39066989?spm=1001.2014.3001.5343" target="_blank">
            <img style="width:45px;height:45px" src="/blog/images/csdn.png" id="csdn"></a>
        </div>
      </div>

      <div class="cloud ui segment animated bounceInUp">
        <h3>标签云</h3>
        <ul>
          <li th:each="tag:${tags}"><a href="javascript:;" th:href="@{'/articleList/1?tag='+${tag.id}}" th:text="${tag.tagName}">个人博客</a></li>
        </ul>
      </div>

      <div class="tuwen ui segment animated rotateInUpRight">
        <h3>图文推荐</h3>
        <ul>
          <li th:each="top:${topViews}">
            <a href="javascript:;" th:href="@{/article/{id}(id=${top.id})}"><img src="/blog/images/02.jpg"><b th:text="${top.title}">教你怎样用欠费手机拨打电话</b></a>
            <p><span class="tulanmu">
              <a href="javascript:;" th:href="@{'/articleList/1?category='+${top.category}}" th:text="${top.categoryName}">手机配件</a>
            </span>
              <span class="tutime" th:text="${#dates.format(top.createTime,'yyyy-MM-dd')}">2015-02-15</span></p>
          </li>
        </ul>
      </div>

      <div class="links ui segment animated bounceInRight">
        <h3><span>[<a href="#">申请友情链接</a>]</span>友情链接</h3>
        <ul>
          <li><a href="#">web开发</a></li>
          <li><a href="#">前端设计</a></li>
          <li><a href="#">Html</a></li>
          <li><a href="#">CSS3</a></li>
          <li><a href="#">Html5+css3</a></li>
          <li><a href="#">百度</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="footer" th:replace="blog/fragment::footer"></div>

<!--音乐盒-->
<div id="aplayer"></div>

<script src="/blog/dist/jquery/jquery-3.4.1.min.js"></script>
<script src="/blog/dist/semantic/semantic.min.js"></script>
<script src="/blog/js/global.js"></script>
<script src="/blog/layui/layui.js" type="text/javascript"></script>
<script src="/blog/js/index/index.js" type="text/javascript"></script>
<!-- 使用 aotuload.js 引入看板娘 -->
<!--<script src="/blog/kanban/live2d/assets/autoload.js?v=1.4.2"></script>-->
<!--音乐播放器-->
<link href="/blog/APlayer/APlayer.min.css" rel="stylesheet">
<script src="/blog/APlayer/hls.min.js"></script>
<script src="/blog/APlayer/APlayer.min.js"></script>
<script type="text/javascript">

  // $(function(){
  //   var oLi = document.getElementById("tab").getElementsByTagName("li");
  //   var oUl = document.getElementById("ms-main").getElementsByTagName("div");
  //   for(var i = 0; i < oLi.length; i++)
  //   {
  //     oLi[i].index = i;
  //     oLi[i].onmouseover = function ()
  //     {
  //       for(var n = 0; n < oLi.length; n++) oLi[n].className="";
  //       this.className = "cur";
  //       for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";
  //       oUl[this.index].style.display = "block"
  //     }
  //   }
  // });

  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [
      {
        name: '霜雪千年',
        artist: '双笙/封茗囧菌',
        url: 'http://music.163.com/song/media/outer/url?id=409650851.mp3',
      },
      {
        name: '好运来',
        artist: '艾北',
        url: 'http://music.163.com/song/media/outer/url?id=1490642852.mp3',
      }
    ],
    fixed : true
  });

  $("#wechat").popup({
    popup : $('#wechatImg'),
    on : 'hover',
    position: 'top center'
  });
  $("#csdn").popup({
    content : '点击跳转到CSDN'
  });
  $("#gitee").popup({
    content : '点击跳转到Gitee'
  });


</script>

</body>
</html>
